<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../assets/boostrap/bootstrap.css">
    <style>
        body {
            padding-bottom: 800px;
        }

        .box {
            margin: 0 auto;
            width: 800px;
        }

        .card {
            width: 400px;
            background-color: #dedede;
            margin: 0 auto;
        }

        .table td,
        table th {
            vertical-align: middle;
            text-align: center;
        }

        .num-ground {
            width: 120px;
            margin: 0 auto;
        }

        .num-ground input[type="text"] {
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">

        <div class="box">
            <div class="card mt-4">
                <div class="card-body">
                    <form>
                        <div class="mb-3">
                            <label class="form-label">产品名称</label>
                            <input type="text" class="form-control" :value="product.name" @input="product.name=$event.target.value">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">产品数量</label>
                            <input type="number" class="form-control" :value="product.num" @input="product.num=$event.target.value">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">产品单价</label>
                            <input type="number" class="form-control" :value="product.price" @input="product.price=$event.target.value">
                        </div>
                        <div class="d-grid gap-2">
                            <button type="button" class="btn btn-primary" @click="addNewIten()">添加</button>
                        </div>
                    </form>
                </div>
            </div>
            <table class="table table-bordered mt-4">
                <thead class="table-dark">
                    <tr>
                        <th>
                            <input type="checkbox">
                        </th>
                        <th>编号</th>
                        <th>产品名称</th>
                        <th>产品单价</th>
                        <th>购买数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(p,i) in products" :key="p.id">
                        <td>
                            <input type="checkbox" :checked="p.state" @change=" p.state = $event.target.checked ">
                        </td>
                        <td>{{ i+1 }}</td>
                        <td>{{ p.name }}</td>
                        <td>{{ p.price }}</td>
                        <td>
                            <div class="input-group input-group-sm num-ground">
                                <button class="btn btn-outline-secondary" type="button" @click="subNum(i)">-</button>
                                <input type="text" class="form-control" readonly :value="p.num">
                                <button class="btn btn-outline-secondary" type="button" @click="p.num++">+</button>
                            </div>
                        </td>
                        <td>
                            <button type="button" class="btn btn-danger btn-sm" @click="removeItem(i)">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            总计
                        </td>
                        <td colspan="3">
                            被选中<span style="color:red;">0</span>,
                            总计<span style="color:red;">0</span>元
                        </td>
                        <td>
                            <button type="button" class="btn btn-danger btn-sm" @click="removeChooseItem()">删除选择项</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

    </div>

    <script src="../../assets/mockjs/mock-min.js"></script>
    <script type="module">
        import { createApp } from "../../assets/vue3/vue.esm-browser.js";
        createApp({
            data() {
                return {
                    product:{
                        name:"",
                        price:0,
                        num:0
                    },
                    products:Mock.mock({
                        "list|4":[
                            {
                                id:"@id",
                                name:"@cword(4)",
                                price:"@integer(60, 100)",
                                num:1,
                                state:false
                            }
                        ]
                    }).list
                }
            },
            methods:{
                subNum(i){
                    let tempNum = this.products[i].num - 1;
                    if(tempNum>0){
                        this.products[i].num = tempNum;
                    }else{
                        // let flag = confirm("是否删除该产品")
                        // if(flag){
                        //     this.products.splice(i,1);
                        // }
                        this.removeItem(i)
                    }
                },
                addNewIten(){
                    // this.product.id = Mock.mock("@id");
                    // this.product.state = false;
                    // this.products.push(this.product);

                    // this.products.push({
                    //     // 对象展开符
                    //     ...this.product,
                    //     id:Mock.mock("@id"),
                    //     state:false
                    // })

                    let obj = Object.assign(
                        {
                            id:Mock.mock("@id"),
                            state:false
                        },
                        this.product
                    );

                    this.products.push(obj);
                },
                removeItem(i){
                    let flag = confirm("是否删除该产品")
                    if(flag){
                        this.products.splice(i,1);
                    }
                },
                removeChooseItem(){
                    this.products = this.products.filter(item=>!item.state)
                }
            }
        }).mount("#app")
    </script>
</body>

</html>